<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <title>单位净值</title>
  <link rel="stylesheet" href="../css/fund.css" />
  <style>
    canvas {
      height: 46.4vw;
    }
    .chart-header-wrapper {
      width: 100%;
      height: 12vw;
      line-height: 12vw;
      vertical-align: middle;
      font-size: 3.2vw;
      color: #808080;
      padding: 0 4.267vw;
    }

    .header-item {
      float: left;
    }

    .header-item:nth-child(1) {
      width: 40%;
    }

    .header-item:nth-child(2) {
      width: 35%;
    }

    .header-item:nth-child(3) {
      width: 25%;
    }

    #chartTooltip {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      height: 8vw;
      line-height: 8vw;
      background: #E9F1FF;
      z-index: 10;
      transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .tab .time-button {
      width: 25%;
    }
  </style>
  <script src="../js/f2-all.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
</head>

<body>
  <div class="chart-card">
    <div class="chart-container">
      <div class="chart-header-wrapper" id="chartTooltip">
        <div class="header-item">
          <span class="item-value" data-type="time">--</span>
        </div>
        <div class="header-item" style="text-align: center;">
          <span>单位净值:</span>
          <span class="item-value" data-type="value">--</span>
        </div>
        <div class="header-item" style="padding-right: 0;">
          <span>日涨幅:</span>
          <span class="item-value" data-type="percent">--</span>
        </div>
      </div>
      <div class="chart-header-wrapper" id="chartLegend">
        <div class="header-item">
          <span class="item-value" data-type="time">--</span>
        </div>
        <div class="header-item" style="text-align: center;">
          <span>单位净值:</span>
          <span class="item-value" data-type="value">--</span>
        </div>
        <div class="header-item" style="padding-right: 0;">
          <span>日涨幅:</span>
          <span class="item-value" data-type="percent">--</span>
        </div>
      </div>
      <!-- 图表主题 -->
      <canvas id="mountNode"></canvas>
      <!-- 时间切换 按钮 -->
      <div class="tab">
        <button class="time-button button-25 active" id="one-month">近 1 月</button>
        <button class="time-button button-25" id="three-month">近 3 月</button>
        <button class="time-button button-25" id="six-month">近 6 月</button>
        <button class="time-button button-25" id="one-year">近 1 年</button>
      </div>
    </div>
  </div>
  <script>
  var Chart = F2.Chart;
  var Util = F2.Util;
  var Animate = F2.Animate;
  // 自定义线图变更动画
  Animate.registerAnimation('lineUpdate', function(updateShape, animateCfg) {
    var cacheShape = updateShape.get('cacheShape'); // 该动画 shape 的前一个状态
    var cacheAttrs = cacheShape.attrs; // 上一个 shape 属性
    var geomType = cacheShape.geomType; // 图形类型

    var oldPoints = cacheAttrs.points; // 上一个状态的关键点
    var newPoints = updateShape.attr('points'); // 当前 shape 的关键点

    var oldLength = oldPoints.length;
    var newLength = newPoints.length;
    var deltaLength = geomType === 'area' ? (oldLength - newLength) / 2 : oldLength - newLength;

    if (deltaLength > 0) {
      var firstPoint = newPoints[0];
      var lastPoint = newPoints[newPoints.length - 1];

      for (var i = 0; i < deltaLength; i++) {
        newPoints.splice(0, 0, firstPoint);
      }

      if (geomType === 'area') {
        for (var j = 0; j < deltaLength; j++) {
          newPoints.push(lastPoint);
        }
      }
    } else {
      deltaLength = Math.abs(deltaLength);
      var firstPoint1 = oldPoints[0];
      var lastPoint1 = oldPoints[oldPoints.length - 1];

      for (var k = 0; k < deltaLength; k++) {
        oldPoints.splice(0, 0, firstPoint1);
      }

      if (geomType === 'area') {
        for (var p = 0; p < deltaLength; p++) {
          oldPoints.push(lastPoint1);
        }
      }

      cacheAttrs.points = oldPoints;
    }
    updateShape.attr(cacheAttrs);
    updateShape.animate().to(Util.mix({
      attrs: {
        points: newPoints
      }
    }, animateCfg));
  });

  function updateLegend(currentInfo) {
    var FSRQ = currentInfo.FSRQ;
    var DWJZ = currentInfo.DWJZ;
    var JZZZL = currentInfo.JZZZL;
    // 填充自定义图例内容
    $('#chartLegend .item-value').each(function(index, ele) {
      var type = $(ele).data('type');
      if (type === 'time') {
        $(ele).text(FSRQ + '（昨日）');
      } else if (type === 'value') {
        $(ele).text(DWJZ.toFixed(4));
      } else if (type === 'percent') {
        var color;
        var text;
        if (JZZZL < 0) {
          color = '#53BC20';
          text = JZZZL + '%';
        } else if (JZZZL > 0) {
          color = '#F5222D';
          text = '+' + JZZZL + '%';
        } else {
          text = JZZZL + '%';
        }
        $(ele).css({
          color: color
        });
        $(ele).text(text);
      }
    });
  }

  var chart = new Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio,
    padding: [ 14, 'auto', 'auto' ]
  });

  // 处理数据
  $.getJSON('./data/nav/one-month.json', function(data) {
    chart.source(data, {
      FSRQ: {
        type: 'timeCat',
        tickCount: 3,
        range: [ 0, 1 ]
      },
      DWJZ: {
        tickCount: 5,
        formatter: function(val) {
          return val.toFixed(4);
        }
      }
    });
    chart.animate({
      'axis-label': false
    });
    chart.axis('FSRQ', {
      label: function(text, index, total) {
        var cfg = {
          textAlign: 'center'
        };
        if (index === 0) {
          cfg.textAlign = 'start';
        } else if (index === (total - 1)) {
          cfg.textAlign = 'end';
        }

        var arr = text.split('-');
        if (arr[0] === '2018') {
          cfg.text = arr[1] + '-' + arr[2];
        }
        return cfg;
      }
    });
    chart.axis('DWJZ', {
      label: function(text, index) {
        if (index === 0) {
          return {
            fill: 'rgb(0, 0, 0)'
          };
        }
        return {};
      }
    });
    chart.tooltip({
      showCrosshairs: true,
      crosshairsStyle: {
        stroke: '#CAD7EF'
      },
      custom: true,
      onChange: function(obj) {
        var items = obj.items;
        var FSRQ = items[0].origin.FSRQ;
        var DWJZ = items[0].origin.DWJZ;
        var JZZZL = items[0].origin.JZZZL;
        $('#chartTooltip .item-value').each(function(index, ele) {
          var type = $(ele).data('type');
          if (type === 'time') {
            $(ele).text(FSRQ);
          } else if (type === 'value') {
            $(ele).text(DWJZ.toFixed(4));
          } else if (type === 'percent') {
            var color;
            var text;
            if (JZZZL < 0) {
              color = '#53BC20';
              text = JZZZL + '%';
            } else if (JZZZL > 0) {
              color = '#F5222D';
              text = '+' + JZZZL + '%';
            } else {
              text = JZZZL + '%';
            }
            $(ele).css({
              color: color
            });
            $(ele).text(text);
          }
        });

        $('#chartTooltip').css('visibility', 'visible');
      },
      onHide: function() {
        $('#chartTooltip').css('visibility', 'hidden');
      }
    });
    chart.line().position('FSRQ*DWJZ').animate({
      update: {
        animation: 'lineUpdate'
      }
    });
    chart.area().position('FSRQ*DWJZ').animate({
      update: {
        animation: 'lineUpdate'
      }
    });
    chart.render();
    updateLegend(data[data.length - 1]); // 显示昨日
  });

  // button 点击操作
  $('.tab button').click(function(e) {
    var target = $(e.target);
    var id = target.attr('id');
    if (target.hasClass('active')) {
      return;
    }

    var currentActive = $('.tab').find('button.active');
    currentActive.removeClass('active');
    target.addClass('active');

    var url = `./data/nav/${id}.json`;
    $.getJSON(url, function(json) {
      chart.changeData(json);
    });
  });
  </script>
</body>

</html>
